<template>
  <div class="boxContent">
    <div class="appBox">

      <div class="top flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="$router.go(-1)">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title"> 查看账单 </div>
        </div>
        <div>
          <el-button v-preventReClick
                     type="primary"
                     v-permission="1145"
                     @click="exportFlie">
            导出
          </el-button>
        </div>
      </div>

      <div class="flex mt50 f16">
        <div class="info width400 overflow_1">账单编号：<span class="black fb">{{ data.batchNo }}</span></div>
        <div class="info width400 overflow_1">账单日期：<span class="black fb">{{$dayjs(new Date(data.dateMinusAmount).getTime() - 1000*60*60*24).format('YYYY-MM-DD')  }}</span></div>
        <div class="info width400 overflow_1">扣款日期：<span class="black fb">{{ data.dateMinusAmount }}</span></div>
        <div class="info width400 overflow_1">合计扣款：<span class="black fb">¥{{ data.amount }}</span></div>

      </div>
      <div class="flex mt30 f16">

        <div class="info width400 overflow_1">扣款后余额：<span class="black fb">¥{{ data.useAmount }}</span></div>
        <div class="info width400 overflow_1">账单状态：<span class="black fb">{{ data.status == 1 ? '已扣款':'未扣款'}}</span></div>
        <div class="info width400 overflow_1">派遣企业：<span class="black fb">{{ data.name }}</span></div>

      </div>

      <el-table border
                class="mt50"
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ color: '#000' }">
        <el-table-column prop="name"
                         label="昵称/姓名"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="phone"
                         label="手机号"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="positionname"
                         label="所属职位"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="status"
                         label="扣费类型"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="amount"
                         label="扣费金额"
                         show-overflow-tooltip
                         align="center" />

      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {},
      params: {
        pageNum: 1,
        pageSize: 10,
        id: '',
        companyid: '',
        cid: '',
        isccid: '',
        date: '',
      },
      loading: false,
      tableData: [],
    }
  },
  mounted () {
    this.data = JSON.parse(this.$route.query.data)
    this.params.id = this.data.id
    this.params.cid = this.data.cid
    this.params.companyid = this.data.companyid
    this.params.isccid = this.data.isccid
    this.params.date = this.data.workDate
    this.getData()
  },
  methods: {
    exportFlie () {
      this.$http
        .get(
          `/companywalletflow/exportFlowDetails?cid=${this.params.cid}&companyid=${this.params.companyid}&isccid=${this.params.isccid}&date=${this.params.date}`,
          { responseType: "arraybuffer" }
        )
        .then((res) => {
          if (res) {
            this.$parse.downloadExcel(res, '账单详情数据')
          }
        });
    },

    getData () {
      this.loading = true
      this.$get('companywalletflow/queryFlowDetails', this.params).then(res => {
        this.loading = false
        this.tableData = res.data.data
        this.data.useAmount = res.data.useAmount
      })
    },
    submit () {

    },
  },
}
</script>

<style lang="scss" scoped>
.width400 {
  width: 350px;
  margin-left: 30px;
}
.top {
  .ruturn {
    color: rgba(121, 121, 121, 1);
    font-size: 16px;
    position: relative;
    margin-left: 10px;
    margin-top: -2px;
  }
  .ruturn::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 4px;
    width: 1px;
    height: 16px;
    background: rgba(121, 121, 121, 0.8);
  }
  .left {
    align-items: center;
  }
  .title {
    color: rgb(83, 83, 83);
    font-size: 16px;
    margin-left: 40px;
    font-weight: bold;
  }
}
</style>